純粹而言，內聯(lián)CSS和JS要快一些。這主要是因為外部的示例需要承擔多個(gè)http請求帶來(lái)的開(kāi)銷(xiāo)。盡管外部示例可以從樣式表和腳本的并行下載中獲益，但是明顯第一個(gè)因素影響的更大一些。這也就是它放在第一位的原因。但外部CSS和JS文件有機會(huì )被瀏覽器緩存起來(lái)。當一個(gè)頁(yè)面被重復訪(fǎng)問(wèn)時(shí)，就不需要重復下載外部CSS和JS了。既減小了需要下載文檔的大小，又不會(huì )產(chǎn)生多余的http請求數量。

所以，使用內嵌式的還是外聯(lián)式的，需要通過(guò)一定的手段衡量。

1、 頁(yè)面查看。每個(gè)用戶(hù)產(chǎn)生的頁(yè)面查看越少，內聯(lián)的越占優(yōu)勢。（比如，一個(gè)月只訪(fǎng)問(wèn)你的網(wǎng)站一次，即使有緩存，下次訪(fǎng)問(wèn)的時(shí)候也很有可能被移除了）相反，訪(fǎng)問(wèn)頁(yè)面的次數越多，外聯(lián)的越有優(yōu)勢。

2、 緩存，如果沒(méi)有設置緩存，肯定的是內聯(lián)的有優(yōu)勢

3、 組建重用，簡(jiǎn)單的說(shuō)就是組件重用度低采用內聯(lián)的好，高則外聯(lián)的好。這一條是建立在用戶(hù)屬否在一次回話(huà)中訪(fǎng)問(wèn)網(wǎng)站的多個(gè)頁(yè)面。只有訪(fǎng)問(wèn)多個(gè)頁(yè)面才有意義。有兩種極端情況：一個(gè)是每個(gè)頁(yè)面使用都使用各自單獨的組件，沒(méi)有公用部分。這樣做會(huì )產(chǎn)生過(guò)多的http請求數量，只對用戶(hù)只訪(fǎng)問(wèn)一個(gè)頁(yè)面時(shí)有意義。另一種極端是創(chuàng )建一個(gè)單獨的js文件，包含所有的頁(yè)面使用的js，再創(chuàng )建一個(gè)css包含所有頁(yè)面使用的css。用戶(hù)在訪(fǎng)問(wèn)一個(gè)頁(yè)面以后所有的js和css都將會(huì )被緩存。在訪(fǎng)問(wèn)多個(gè)頁(yè)面并且訪(fǎng)問(wèn)非常頻繁的時(shí)候有意義。

事實(shí)上頁(yè)面之間的js和css不可能100%不重合，也不可能100%重合。所以要使用中間情形。對于我們的網(wǎng)站，訪(fǎng)問(wèn)量比較大，如果訪(fǎng)問(wèn)了一般情況下就不會(huì )只訪(fǎng)問(wèn)一個(gè)頁(yè)面。所以我們使用外聯(lián)的。既有公用的common.js，header.js還有每個(gè)頁(yè)面特有的js。符合這一點(diǎn)。我們的網(wǎng)站使用這種外聯(lián)的最為合適。

那么是不是所有的頁(yè)面都適合使用外聯(lián)的最好？有一個(gè)例外，就是主頁(yè)。

這里的主頁(yè)是指作為瀏覽器默認頁(yè)的URL，比如http://hao.#/360導航頁(yè)。

分析：1、頁(yè)面查看，雖然訪(fǎng)問(wèn)量非常高，但是通常每個(gè)回話(huà)只訪(fǎng)問(wèn)一個(gè)頁(yè)面。

2、緩存。完整緩存的比例要比其他的網(wǎng)站更低，處于安全原因，很多用戶(hù)選擇每次關(guān)閉瀏覽器的時(shí)候自動(dòng)清空緩存，所以下一次訪(fǎng)問(wèn)的時(shí)候依舊是空緩存狀態(tài)。

3、組件重用，一般情況下都是跳轉到其他的網(wǎng)站去，所以無(wú)所謂組件重用。

兩全其美：

本書(shū)中還介紹了兩種技術(shù)，使頁(yè)面既可以獲得內聯(lián)的優(yōu)勢，同時(shí)又能緩存外部文件。

加載后下載

上面提到的360導航適合使用內聯(lián)，但是并不是說(shuō)有的主頁(yè)都是只訪(fǎng)問(wèn)一個(gè)頁(yè)面，比如我們淘車(chē)的網(wǎng)站。我們既希望使用內聯(lián)快速的加載出頁(yè)面，又希望通過(guò)緩存外部組件的形式為后面其他頁(yè)面的瀏覽做準備。所以就會(huì )用到下載后加載的技術(shù)。

示例：

加載后下載是將doOnload函數內聯(lián)到文檔的onload事件。在1秒的延遲之后（確保頁(yè)面呈現完畢），就會(huì )下載所需要的js和css文件，通過(guò)創(chuàng )建對應的DOM元素（script和link）并賦予制定的URL實(shí)現。在這種頁(yè)面中。Js和css會(huì )被加載到頁(yè)面中兩次（先是內聯(lián)的，然后是外部的）要使其能夠工作，必須處理雙重定義。例如腳本可以定義但不能執行任何函數（至少不能讓用戶(hù)發(fā)覺(jué)）。使用了相對單位（百分比）的css也會(huì )產(chǎn)生問(wèn)題。解決辦法：將這些組件放在一個(gè)不可見(jiàn)的Ifeame中。

動(dòng)態(tài)內聯(lián)：

配合加載后下載使用，下載組件后設置cookie。然后重新加載頁(yè)面后判斷有沒(méi)有cookie，有的話(huà)使用外部的，沒(méi)有的話(huà)使用內聯(lián)的。這樣就能在內聯(lián)和外部之間做出只能選擇，從而改善響應時(shí)間。